* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Microsoft YaHei;
}
.text-center {
  text-align: center;
}
.main-container {
  width: 100%;
  height: 100%;
}
.main-container .sidebar-container {
  position: absolute;
  width: 46px;
  left: 0px;
  top: 30px;
  bottom: 200px;
  max-height: 100%;
  overflow: auto;
  background: #f6f6f6;
  z-index: 1;
  border-radius: 2px;
  overflow-x: hidden;
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}
.main-container .sidebar-container::-webkit-scrollbar {
  width: 3px;
}
.main-container .sidebar-container::-webkit-scrollbar-track {
  background-color: #ccc;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.main-container .sidebar-container::-webkit-scrollbar-thumb {
  background-color: #999;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.main-container .sidebar-container img {
  padding: 5px;
  margin: 2px;
  border-radius: 3px;
  width: 32px;
  height: 32px;
}
.main-container .sidebar-container img:hover {
  background: #ccc;
}
.main-container .resize-container {
  cursor: n-resize;
  position: absolute;
  bottom: 190px;
  width: 100%;
  height: 20px;
  background: transparent;
}
.editor-container,
.xml-container {
  position: absolute;
  left: 38px;
  width: 100%;
  top: 30px;
  bottom: 200px;
  background-image: linear-gradient(
      90deg,
      rgba(153, 153, 153, 0.3) 1px,
      rgba(0, 0, 0, 0) 1px
    ),
    linear-gradient(rgba(153, 153, 153, 0.3) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 8px 8px;
  overflow: auto;
}
.properties-container {
  position: absolute;
  width: 100%;
  bottom: 0px;
  height: 200px;
  box-shadow: -2px 1px 3px #eee;
  overflow: auto;
}
.properties-container .layui-form-selectup dl {
  top: auto;
  bottom: auto;
}
.properties-container .layui-table-cell {
  height: 32px;
  line-height: 32px;
  overflow: visible !important;
}
.properties-container .layui-table-box,
.properties-container .layui-table-body {
  overflow: visible;
}
.properties-container .layui-table-cell {
  padding: 0 5px;
}
.properties-container .layui-table .layui-input-block {
  margin-left: 0px;
  min-height: 32px;
  height: 32px;
}
.properties-container .layui-table,
.properties-container .layui-table-view {
  margin-top: 0px;
}
.properties-container .layui-table .layui-input,
.properties-container .layui-table .layui-select,
.properties-container .layui-table .layui-textarea {
  height: 32px;
}
.properties-container .editor-form-node .layui-form-relative {
  position: relative;
}
.properties-container .editor-form-node input,
.properties-container .editor-form-node textarea {
  font-family: "Consolas";
  font-size: 14px;
}
.properties-container .editor-form-node .layui-form-relative .layui-icon-close {
  position: absolute;
  left: 10px;
  font-size: 28px;
  top: 30px;
  color: #333;
  cursor: pointer;
  z-index: 1;
}
.properties-container
  .editor-form-node
  .layui-form-relative
  .layui-icon-close.function-remove {
  top: 5px;
}
.properties-container
  .editor-form-node
  .layui-form-relative
  .layui-icon-close.cmd-remove {
  top: 5px;
}

.properties-container .layui-tab {
  margin: 0px;
}

.toolbar-container ul li {
  float: left;
  padding: 0 10px;
  cursor: pointer;
  margin-top: 5px;
  /*margin-right: 5px;*/
  color: #333;
}
.toolbar-container ul span {
  float: left;
  line-height: 30px;
  font-size: large;
  margin: 0 5px 0 5px;
  color: #ccc;
}
.toolbar-container ul li:hover {
  color: #ff4d02;
  background-color: rgb(204, 204, 204);
}
.toolbar-container ul li:not(:first-child) {
  /*border-left: 1px solid #ccc;*/
}

.test-window-container .output-container {
  /* height: 320px; */
}
.test-window-container .log-container {
  border: 1px solid #ccc;
}
.test-window-container .log-container textarea {
  width: 100%;
  height: 100%;
}
.xml-container {
  display: none;
}
.xml-container textarea {
  width: 100%;
  height: 99.6%;
  border: none;
  padding: 10px 20px;
  box-sizing: border-box;
}
.xml-container textarea::-webkit-scrollbar {
  width: 5px;
}
.xml-container textarea::-webkit-scrollbar-track {
  background-color: #ccc;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.xml-container textarea::-webkit-scrollbar-thumb {
  background-color: #999;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.log-container span {
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
}
.log-container .test-log > span {
  height: 24px;
  line-height: 24px;
  float: left;
  font-family: "Consolas";
}
.log-container .test-log {
  height: 24px;
  line-height: 24px;
  width: 100%;
  clear: both;
}
.log-container .test-log.log-error {
  color: red;
}
.log-container span.level {
  text-align: center;
  width: 60px;
}
.log-container span.timestamp {
  margin-right: 5px;
}
.log-container span.variable {
  margin: 0 2px;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: #025900;
}
.log-container span.variable-object,
.log-container span.variable-array {
  color: #2a00ff;
}
.log-container span.variable.variable-boolean {
  color: #600100;
}
.log-container span.variable.variable-number {
  color: #000e59;
}
.jsontree_value-wrapper {
  overflow: unset !important;
}
.jsontree_value_string,
.jsontree_node {
  white-space: nowrap;
}
#test-window {
  padding: 0px 0px;
  overflow: hidden;
}
.layui-layer.codemirror .layui-input-block {
  margin-left: 0px;
}

.hint-grammer {
  width: 100%;
  color: #333;
}
.hint-grammer:not(:first-child) {
  border-top: 1px solid #ccc;
  margin-top: 5px;
  padding-top: 5px;
}
.hint-grammer .hint-owner span {
  color: #600100;
}
.hint-grammer .hint-return span {
  color: #0000c0;
}
.hint-grammer .hint-example {
  padding: 2px 5px;
  color: #000;
}
.layui-layer-tips {
  word-break: break-all;
}

.toolbar-container ul li {
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center center;
  width: 20px;
  height: 20px;
  padding: 0 4px;
}
.toolbar-container ul li.btn-save {
  background-image: url("");
}
.toolbar-container ul li.btn-return {
  background-image: url("");
}
.toolbar-container ul li.btn-selectAll {
  background-image: url("");
}
.toolbar-container ul li.btn-console-xml {
  background-image: url("");
}
.toolbar-container ul li.btn-graphical-xml {
  background-image: url("");
}
.toolbar-container ul li.btn-edit-xml {
  background-image: url("");
}
.toolbar-container ul li.btn-copy {
  background-image: url("");
}
.toolbar-container ul li.btn-paste {
  background-image: url("");
}
.toolbar-container ul li.btn-delete {
  background-image: url("");
}
.toolbar-container ul li.btn-cut {
  background-image: url("");
}
.toolbar-container ul li.btn-undo {
  background-image: url("");
}
.toolbar-container ul li.btn-redo {
  background-image: url("");
}
.toolbar-container ul li.btn-debug {
  background-image: url("");
}
.toolbar-container ul li.btn-debug.disabled {
  background-image: url("");
}
.toolbar-container ul li.btn-stop {
  background-image: url("");
}
.toolbar-container ul li.btn-stop.disabled {
  background-image: url("");
}
.toolbar-container ul li.btn-test {
  background-image: url("");
}
.toolbar-container ul li.btn-test.disabled {
  background-image: url("");
}
.toolbar-container ul li.btn-resume {
  background-image: url("");
}
.toolbar-container ul li.btn-resume.disabled {
  background-image: url("");
}
.toolbar-container ul li.btn-history {
  background-image: url("");
}
.toolbar-container ul li.btn-dock-right {
  background-image: url("");
}
.toolbar-container ul li.btn-dock-bottom {
  background-image: url("");
}
.spiderflow-debug-tooltip {
  position: absolute;
  z-index: 2147483647;
  background: #fefefe;
  border-radius: 2px;
  padding: 5px;
  border: 1px solid #eee;
  box-shadow: 2px 0px 5px 1px rgba(0, 0, 0, 0.6);
}
.spiderflow-debug-tooltip .content {
  max-height: 500px;
  overflow: auto;
  max-width: 500px;
}
.spiderflow-debug-tooltip .content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.spiderflow-debug-tooltip .content::-webkit-scrollbar-track {
  background-color: #ccc;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.spiderflow-debug-tooltip .content::-webkit-scrollbar-thumb {
  background-color: #999;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.spiderflow-debug-tooltip::before {
  content: " ";
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: -17px;
  left: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
  margin-left: -4px;
}
.spiderflow-debug-tooltip::after {
  content: " ";
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: -16px;
  left: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #fefefe transparent transparent transparent;
  margin-left: -4px;
}

/*样式调整*/
.properties-container .editor-form-node input,
.properties-container .editor-form-node textarea {
  font-size: 12px;
}
.properties-container .editor-form-node .layui-input,
.properties-container .editor-form-node .layui-select,
.properties-container .editor-form-node .layui-textarea {
  height: 24px;
}
.layui-form-label {
  padding: 0 5px;
  line-height: 24px;
}
.layui-input-block {
  min-height: 24px;
  line-height: 24px;
}
.layui-input-block {
  margin-left: 100px;
}

.layui-tab-title li {
  font-size: 12px;
  line-height: 24px;
}
.layui-tab-title {
  height: 24px;
}
.layui-tab-title .layui-this:after {
  height: 25px;
}
.layui-form-select dl {
  top: 26px;
}
.layui-form-select dl dd,
.layui-form-select dl dt {
  line-height: 24px;
}
.layui-table td,
.layui-table th {
  font-size: 12px;
  padding: 0;
}
.properties-container .layui-table-cell {
  height: 24px;
  line-height: 24px;
}
.properties-container .layui-table .layui-input,
.properties-container .layui-table .layui-select,
.properties-container .layui-table .layui-textarea {
  height: 24px;
}
.properties-container .layui-table .layui-input-block {
  height: 24px;
  min-height: 24px;
}
.layui-table-view .layui-table td,
.layui-table-view .layui-table th {
  padding: 2px 0;
}
.layui-form-item {
  margin-bottom: 5px;
}
.CodeMirror {
  padding-top: 0px !important;
  font-size: 12px;
}
.CodeMirror-lines {
  padding: 0px !important;
}
.CodeMirror-cursor {
  height: 16px !important;
  margin-top: 3px;
}
.layui-form-item .layui-form-checkbox[lay-skin="primary"] {
  margin-top: -2px;
}
.layui-colorpicker {
  width: 16px;
  height: 16px;
  padding: 4px;
}
.layui-icon-down:before {
  position: absolute;
  top: 2px;
  left: 6.5px;
}
.properties-container button.layui-btn {
  height: 24px;
  line-height: 24px;
  padding: 0px 5px;
}
.properties-container .layui-form-item .layui-input-inline {
  width: auto;
}

.layer-test .layui-layer-title {
  height: 24px;
  line-height: 24px;
}
.layer-test .layui-layer-setwin {
  top: 6px;
}
.layer-test .layui-tab {
  margin: 0px;
}
.layer-test .layui-tab-content {
  padding: 2px;
}
.layer-test .layui-layer-btn {
  padding-top: 2px !important;
  margin-top: -5px;
}
.layer-test .layui-layer-btn .layui-inline {
  margin-top: 5px;
}
.layer-test .layui-layer-btn .layui-inline input {
  font-size: 12px;
  height: 26px;
}
.layer-test .layui-layer-btn a {
  height: 24px;
  line-height: 24px;
  margin: 5px 5px 0;
  padding: 0px 10px;
  font-size: 12px;
}
.layer-test .layui-layer-max {
  display: none;
}
.layer-test .layui-layer-max.layui-layer-maxmin {
  display: inline-block;
}
/* #test-window{
	height:340px !important;
} */

.history-version {
  list-style: disc;
  padding: 2px 5px;
  max-height: 200px;
  overflow: auto;
}
.history-version::-webkit-scrollbar {
  width: 4px;
}
.history-version::-webkit-scrollbar-track {
  background-color: #ccc;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.history-version::-webkit-scrollbar-thumb {
  background-color: #999;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.history-version li {
  color: #333;
  cursor: pointer;
  font-size: 12px;
  height: 22px;
  line-height: 22px;
  border-bottom: 1px solid #eee;
  list-style: disc inside;
}
.history-version li:nth-last-child(1) {
  border-bottom: none;
}
.history-version li:hover {
  color: #1890ff;
}

.main-container.right .sidebar-container {
  bottom: 0px !important;
  width: 50px !important;
}
.main-container.right .editor-container {
  bottom: 0px !important;
  left: 38px !important;
}
.main-container.right .properties-container {
  right: 0px;
  height: 100% !important;
  background: white;
}
.main-container.right .layui-col-md2,
.main-container.right .layui-col-md3,
.main-container.right .layui-col-md4,
.main-container.right .layui-col-md10 {
  width: 100% !important;
}
.main-container.right .resize-container {
  height: 100% !important;
  right: 40% !important;
  width: 20px;
  bottom: 0px;
  cursor: e-resize;
}

.layui-table-body.layui-table-main .layui-table,
.layui-table-body.layui-table-main .layui-table input,
.layui-table-box .layui-table-header .layui-table {
  width: 100%;
}
